<template>
  <div>
    <ImageTop class="mb-2"></ImageTop>

    <div class="container-fluid" style="background-color:white;">
      <div class="col-3 border shadow" style="overflow-y: scroll;position:absolute;left: 0;height: 65%;background-color:white;">
        <ul style="list-style: none" class="m-0 p-0">
          <li class="m-0 mb-3 p-0"></li>
          <li class="m-0 mb-3 p-0 border-bottom"> <i class="bi bi-search"></i> 搜索</li>
          <li class="m-0 mb-3 p-0 border-bottom" v-for="(item,index) in categoryList" v-bind:key="index" >
            <a v-bind:href="'#'+item.name">{{ item.name }}</a>
          </li>

        </ul>
      </div>
<!--      id="foodDetails"-->
      <div class="col-9 p-0" style="position: absolute;left: 25%;height: 65%;background-color:white;overflow-y: scroll" >
        <table border="0" cellpadding="" cellspacing="" class="border-bottom"  v-for="(item,index) in categoryList" v-bind:key="index" v-bind:id="item.name">
          <tbody v-for="(good,gIndex) in item.goodsInfo" v-bind:key="gIndex">
          <tr>
            <td rowspan="4" ><img v-bind:src="good.url" width="120" height="100px"></td>
            <td style="width: 100%;font-size: 15px" align="left"><strong>{{ good.name }}</strong></td>
            <td rowspan="4" valign="bottom">
              &emsp;&emsp;&emsp;&emsp;
              <button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#exampleModal" v-on:click="queryGoodsById(good.id)"><small>选规格</small></button>
            </td>
            <td align="left" style="color: red"><small>￥</small><strong>{{ good.price }}</strong></td>
          </tr>
          <tr style="text-overflow: ellipsis">
            <td align="left" style="font-size: 13px">
              <span>原味</span>&nbsp;
              <span>鸭肉</span></td>
          </tr>
          <tr>
            <td align="left"  style="color: #A2A2A2;font-size: 12px">&nbsp;月售&nbsp;6</td>
          </tr>

          </tbody>
        </table>
        <br><br><br><br>
      </div>
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">

            <!--头部商品信息-->
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"><strong style="color: black">{{ addInfo.goodsName }}</strong></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <!--中间规格-->
            <div class="modal-body m-0 p-0" align="left">
              <div class="col-12">
                <small style="color: #A2A2A2">规格</small>
              </div>

              <div class="mt-2">
                <label class="btn btn-outline-warning btn-sm col-3 ml-3 "  v-for="(item, index) in specsList" v-bind:key="index">
                  <input type="radio" name="options" style="display:none" v-bind:value="item.id" v-model="addInfo.specsId"> {{ item.name }}
                </label>
              </div>
            </div>
            <!--底部加入购物车-->
            <div class="modal-footer">
              <button type="button" class="btn btn-warning" v-show="flag" v-on:click="button_add_show;addIntoCart(1)" ><i class="bi bi-cart-plus h5"></i>&nbsp;加入购物车</button>
              <div wdith="50%" v-show="flag2">
                <b-form-spinbutton id="demo-sb"  v-on:change="button_count_hide" v-model="value" min="0" max="100"></b-form-spinbutton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="border shadow" id="cart" style="position: absolute;bottom: 6.8%;width: 100%;background-color:#fff;display: none;">
      <div class="col-12 form-inline" align="">
        <div class="col-4 p-0"><i class="bi bi-clipboard-check"></i> 已选商品列表</div>
        <div class="col-8 p-2" align="right"><i class="bi bi-x-square h3" @click="hideCart"></i></div>
      </div>
      <div class="col-12" style="height: 100%;overflow: scroll">
        <table border="0" cellpadding="" cellspacing="" class="border-bottom" id="foodDetails">

          <tbody v-for="(item,index) in cartList.orderGoodsInfos" v-bind:key="index">
            <tr>
              <td rowspan="4" ><img v-bind:src="item.goodsInfo.url" width="60" height="60"></td>
              <td style="width: 60%;font-size: 15px" align="left"><strong>{{ item.goodsInfo.name }}</strong></td>
              <td rowspan="4" valign="bottom">
                <div>
                  <b-form-spinbutton id="demo-sb" v-model="item.count" v-on:change="addIntoCartByCheck(item.count,item.goodsInfo.id,item.goodsSpecs.id)" min="1" max="100" step="1"></b-form-spinbutton>
                </div>
              </td>
            </tr>

            <tr style="text-overflow: ellipsis">
              <td align="left" style="font-size: 13px">
                <span>{{ item.goodsSpecs.name }}</span>&nbsp;
               </td>
            </tr>
            <tr>
              <td align="left" style="color: red"><small>￥</small><strong>{{ item.count*item.goodsInfo.price*(item.goodsSpecs.extraPrice+1) }}</strong></td>
            </tr>
          </tbody>
        </table>
        <br><br><br>
        <br>
      </div>
    </div>

    <div class="p-0 m-0 ml-1"  style="position: absolute;bottom: 6.8%;width: 98%;background-color:#000;border-radius: 50px">
      <div align="">
        <div style="position: absolute;left: 0px;bottom: 0px;" >
          <button class="btn btn-warning" style="border-radius: 50px 0 0  50px" @click="cart" ><i class="bi bi-cart3 h3"></i></button>
        </div>
        <div style="position: absolute; color: white;left: 5rem;font-size: xx-large;">
          <span>￥{{ cartList.totalPrice }}</span>
        </div>
        <div align="right">
          <button class="btn btn-lg btn-warning" style="border-radius: 0 50px 50px 0" v-on:click="addOrder">去结算</button>
        </div>
      </div>
    </div>
  <BottomNavigation class="m-0 p-0"></BottomNavigation>
  </div>
</template>

<script>
    import service from "../utils/axios";
    export default {
        name: "MenuList",
      data() {
        return {
          value: 0,
          number: 1,
          flag: true,
          flag2:false,
          categoryList: {},
          specsList:{},
          addInfo:{
            goodsId: 1,
            goodsName: "",
            specsId: 1,
            price: 0.0
          },
          cartList:{

          },
          numList:{}
        }
      },
      methods:{
          cart(){
            $("#cart").show()
            $("#cart").css("height","300px")
          },
        hideCart(){
          $("#cart").hide()
        },
        button_add_show(){
          this.flag = false;
          this.flag2=true;
          this.value=1;
        },
        button_count_hide(){
          if(this.value==0){

            this.flag2 = false;
            this.flag=true;
            this.value=0;
          }

        },

        queryAllCategoryList(){
            service.get("/goodsInfo/queryAllCategoryList").then(data => {
              this.categoryList = data.data.data
            })
        },
        queryAllSpecsList(){
          service.get("/goodsInfo/queryAllSpecsList").then(data => {
            this.specsList = data.data.data
          })
        },
        queryGoodsById(id){
          service.get("/goodsInfo/queryGoodsById",{
            params:{
              "id":id
            }
          }).then(data => {
            this.addInfo.goodsId = data.data.data.id
            this.addInfo.goodsName = data.data.data.name
            this.addInfo.price = data.data.data.price
          })
        },
        addIntoCart(num){
            service.post("/shoppingCart/addCart",{
              "goodId":this.addInfo.goodsId,
              "specsId":this.addInfo.specsId,
              "count": num
            }).then(data => {
             this.getCart()
            })
        },
        getCart(){
            service.get("/shoppingCart/getCart").then(data => {
              this.cartList = data.data.data
            })
        },
        addIntoCartByCheck(num,gid,sid){
          service.post("/shoppingCart/checkNum",{
            "goodId":gid,
            "specsId":sid,
            "count": num
          }).then(data => {
            this.getCart()
          })
        },
        addOrder(){
            service.post("/shoppingCart/addOrder").then(data => {
              this.$router.push({
                name: "PlaceOrder",
                params:{
                  id: data.data.data
                }
              })
            })
        }
      },
      created() {
          this.queryAllSpecsList()
          this.queryAllCategoryList()
          this.getCart()
      }
    }
</script>

<style scoped>
  #foodDetails span{
    display:inline-block;height: 16px;width: 36px; background-color: #F2F2F2;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    text-align: center;
    font-size: 12px
  }
</style>
